<template>
  <a-modal
    title="详情"
    :width="940"
    :visible="visible"
    :confirmLoading="loading"
    @ok="modalOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-row>
        <a-col
          :span="12"
          style="text-align: center;font-size: 18px; font-weight: 800;margin-top: 8px"
        >
          <span>投递信息</span>
        </a-col>
        <a-col
          :span="12"
          style="text-align: center;font-size: 18px; font-weight: 800;margin-top: 8px"
        >
          <span>发票信息汇总</span>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :span="12"
          style="text-align: center;font-size: 16px; color: #999; font-weight: 800;margin-top: 8px"
        >
          份数：
          <span
            v-text="model.subscriptionCount"
            style="color: #ba383c; font-size: 18px"
          >
          </span>
        </a-col>
        <a-col
          :span="12"
          style="text-align: center;font-size: 16px; color: #999; font-weight: 800;margin-top: 8px"
        >
          份数合计：
          <span
            v-text="totalCount"
            style="color: #ba383c; font-size: 18px"
          >
          </span>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :span="12"
          style="text-align: center;font-size: 16px; color: #999; font-weight: 800;margin-top: 8px"
        >
          审核：
          <a-select
            placeholder="审核状态"
            style="width: 30%"
            v-model="model.submitState"
            @change="handleChange"
          >
            <a-select-option value="待审核">待审核</a-select-option>
            <a-select-option value="待开票">待开票</a-select-option>
            <a-select-option value="待发行">待发行</a-select-option>
            <a-select-option value="已完成">已完成</a-select-option>
          </a-select>
        </a-col>
        <a-col
          :span="12"
          style="text-align: center;font-size: 16px; color: #999; font-weight: 800;margin-top: 8px"
        >
          金额合计：
          <span
            v-text="totalPrice"
          >
          </span>
        </a-col>
      </a-row>
      <a-divider>投递详细信息</a-divider>
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="客户"
            >
              <span
                v-text="model.customer && model.customer.name"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="订单类型"
            >
              <span
                v-text="model.orderType"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="收订员"
            >
              <span
                v-text="model.subScriptioner"
              >
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="报刊种类"
            >
              <span
                v-text="model.pressType"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="订阅类型"
            >
              <span
                v-text="model.subscriptionType"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="份数"
            >
              <span
                v-text="model.subscriptionCount"
              >
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="联系手机"
            >
              <span
                v-text="model.cellPhone"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="投递站"
            >
              <span
                v-text="model.deliverStation"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="投递段"
            >
              <span
                v-text="model.deliverPart"
              >
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="门牌号"
            >
              <span
                v-text="model.doorplate"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="详细地址"
            >
              <span
                v-text="model.detailedAddress"
              >
              </span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="开始时间"
            >
              <span
                v-text="model.startDate"
              >
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="结束时间"
            >
              <span
                v-text="model.endDate"
              >
              </span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <s-table
        ref="rtable"
        :columns="columns"
        :data="loadData"
        :row-key="(record)=>record.id"
        :showPagination="true"
        style="margin-top: 16px;"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getStationRecord, putDeliveries } from '@/api/manage'
import moment from 'moment'
import { STable } from '@/components'
const fields = ['id']

export default {
  name: 'DetailOnly',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        // xs: { span: 24 }
        sm: { span: 8 }
      },
      wrapperCol: {
        // xs: { span: 24 }
        sm: { span: 15 }
      }
    }
    return {
      totalCount: 0,
      totalPrice: 0,
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '发票流水号',
          dataIndex: 'record.fpqqlsh'
        },
        {
          title: '发票抬头',
          dataIndex: 'record.buyerName'
        },
        {
          title: '发票金额',
          dataIndex: 'record.totalPrice'
        },
        {
          title: '份数',
          dataIndex: 'record.count'
        },
        {
          title: '状态',
          dataIndex: 'delivery.submitState'
        }
      ],
      loadData: (parameter) => {
        return getStationRecord({ deliveryId: this.model.id }).then(res => {
          this.totalPrice = 0.0
          this.totalCount = 0
          res.data.forEach(item => {
            this.totalPrice += item.record.totalPrice
            this.totalCount += item.record.count || 0
          })
          return {
            data: res.data,
            totalCount: parseInt(res.headers['x-count']),
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize
          }
        })
      },
      form: this.$form.createForm(this)
    }
  },
  components: {
    STable
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    const _self = this
    this.$watch('model', () => {
      if (this.visible) {
        // _self.$refs.table.refresh(true)
        // this.$refs.table.refresh(false)
        this.form = this.$form.createForm(this)
        _self.$nextTick(() => {
          this.model && this.form.setFieldsValue(pick(this.model, fields))
          this.$refs.rtable.refresh(true)
        })
      }
    })
  },
  methods: {
    handleChange (value) {
      putDeliveries(this.model.id, this.model).then(res => {
        this.$refs.table.refresh(true)
      }).catch(e => {
        console.error(e)
      })
    },
    moment,
    modalOk () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
